<template>
  <!-- 通过层级选择单位 -->
  <a-select
    v-model="currentValue"
    v-bind="$attrs"
    :placeholder="placeholder"
    :filter-option="filterOption"
    v-on="$listeners"
  >
    <a-icon
      v-if="fetching"
      slot="suffixIcon"
      style="color: #096dd9"
      type="loading"
    />
    <a-spin
      v-if="fetching"
      slot="notFoundContent"
      size="small"
    />
    <a-select-option
      v-for="i in list"
      :key="i.id"
      :value="i.id"
    >
      {{ i.name }}
    </a-select-option>
  </a-select>
</template>
<script>
import { getAllBranchCompany } from '@/api/commons'

export default {
    name: 'SelectJobUnit',
    props: {
        // v-model绑定的数据
        value: {
            type: [Array, String, Object, Number],
        },
        // 需要联动的表单名，
        form: {
            type: Object,
            default: () => ({}),
        },
        // placeholder
        placeholder: {
            type: String,
            default: () => '请选择',
        },
        // 需要联动的表单名
        keyValue: {
            type: String,
            default: () => 'code',
        },
        // 联动表单值改变时是否清空当前表单值
        isClear: {
            type: Boolean,
            default: () => true,
        },

        //如果是编辑，第一次不要重置绑定的值。。。。
        isEdit: {
            type: Boolean,
            default: () => false,
        },
        tagCodes: {
            type: Array,
            default: () => [],
        },
        // 默认使用登录人层级获取单位
        isSelf: {
            type: Boolean,
            default: () => true,
        },
    },
    mounted() {
        // 获取当前登录人选中岗位的组织层级
        this.orgLevel = JSON.parse(sessionStorage.getItem('ycloud-user_info'))?.currentPost?.code
        this.getList()
    },
    data() {
        return {
            isCanClear: !this.isEdit, // 是否清除
            fetching: false, // 加载控件
            list: [], // 项目列表
            orgLevel: '', // 当前登录人选中岗位的组织层级
        }
    },
    methods: {
        /**
         * 获取项目列表
         */
        getList() {
            this.$nextTick(() => {
                if (this.tagCodes?.length == 0) {
                    let params = {}
                    this.fetching = true

                    this.isSelf ? (params.tagCodes = [this.orgLevel]) : (params.tagCodes = [this.form[this.keyValue]]) // 默认使用登录人层级获取单位

                    getAllBranchCompany(params).then((res) => {
                        this.fetching = false
                        this.list = res.data
                    })
                } else {
                    getAllBranchCompany({ tagCodes: this.tagCodes }).then((res) => {
                        this.fetching = false
                        this.list = res.data
                    })
                }
            })
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            )
        },
        /**
         * 获取指定项目的name
         */
        getValueName(id) {
            const target = this.list.find((item) => item.id === id)
            return (target && target) || void 0
        },
    },
    computed: {
        // 需要联动的表单值
        attr() {
            console.log(this.form[this.keyValue])
            return this.form[this.keyValue]
        },
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
            },
        },
    },
    watch: {
        attr(val) {
            console.log(val)
            // 清空表单
            if (this.isClear && !this.isEdit) {
                this.currentValue = void 0
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            }
            // 清空表单
            if (this.isEdit && this.isCanClear) {
                this.currentValue = void 0
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            } else {
                this.isCanClear = true
            }
            // 重置列表
            this.list = []
            val && this.getList()
        },
    },
}
</script>
